<template>
  <el-drawer
    v-model="open"
    title="课次详情"
    :with-header="true"
    size="70%"
    class="roll-call-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
  >
    <div style="font-size: 24px; margin-bottom: 30px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="12">
          {{ props.classTitle }}
        </el-col>
        <el-col
          :span="12"
          style="display: flex; flex-direction: row-reverse"
          v-if="props.ifEdit"
        >
          <el-button plain @click="handleDelete"> 删除课次 </el-button>
          <el-button
            type="primary"
            plain
            @click="handleEdit"
            style="margin: 0 20px"
          >
            编辑课次
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-space fill wrap direction="horizontal" style="width: 100%">
      <el-card shadow="never" header="课次信息">
        <el-form :model="form" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="上课时间">
                {{ form.classDate && form.classDate.slice(0, 10) + "   " }}
                {{ form.classStartTime + " ~ " + form.classEndTime }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授课课程">
                {{ form.courseNameC }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主班老师">
                {{ form.teacherName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="助教老师">
                {{ form.assistantName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授课课时">
                {{ form.classHour }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级容量">
                {{
                  form.plannedStudentCount +
                  "(" +
                  (form.excess === 0 ? "可超额" : "不可超额") +
                  ")"
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上课教室">
                {{ form.classRoomName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上课内容">
                {{ form.description }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" header="上课学员">
        <el-row :gutter="10" class="mb8" v-if="props.ifEdit">
          <el-col :span="12">
            <el-button type="primary" plain @click="handleAddTemp">
              添加临时学员
            </el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="memberList" border>
          <el-table-column label="学员姓名" align="center" prop="studentName">
            <template #default="scope">
              {{
                scope.row.studentName +
                (scope.row.temp === 0
                  ? "(临时学员)"
                  : scope.row.temp === 2
                  ? "(补课学员)"
                  : scope.row.temp === 3
                  ? "(试听学员)"
                  : "")
              }}
            </template>
          </el-table-column>
          <el-table-column label="手机号" align="center" prop="mobile" />
          <el-table-column
            label="消耗方式"
            align="center"
            prop="courseName"
            v-if="props.ifEdit"
          />
          <el-table-column
            label="剩余额度"
            align="center"
            prop="num"
            v-if="props.ifEdit"
          >
            <template #default="scope">{{ scope.row.num + "课时" }}</template>
          </el-table-column>
          <el-table-column
            label="到课状态"
            align="center"
            prop="state"
            v-if="!props.ifEdit"
          >
            <template #default="scope">{{
              {
                "1": "未开课",
                "2": "到课",
                "3": "迟到",
                "4": "请假",
                "5": "未到",
              }[scope.row.state]
            }}</template>
          </el-table-column>
          <!-- <el-table-column label="补课状态" align="center" prop="" /> -->
          <el-table-column
            label="扣除额度"
            align="center"
            prop="classHourPay"
            v-if="!props.ifEdit"
          />
          <el-table-column
            label="备注"
            align="center"
            prop="remark"
            v-if="!props.ifEdit"
          />
          <!-- <el-table-column
            label="操作"
            align="center"
            width="80"
            class-name="small-padding fixed-width"
            v-if="props.ifEdit"
          >
            <template #default="scope">
              <el-button link type="primary" @click="handleTransfer(scope.row)">
                调课
              </el-button>
              <el-button link type="primary" @click="handleLeave(scope.row)">
                请假
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-card>
    </el-space>
  </el-drawer>
  <Schedule
    title="编辑课次"
    btn="保存"
    v-bind="$props"
    ref="scheduleRef"
    from="rollCall"
    @refreshPage="initPage"
    :refresh="true"
  />
  <MemberSelector
    ref="mSelector"
    v-bind="$props"
    @refreshPage="getMumberListByLesson"
    from="rollCall"
    :data="form"
    title="添加临时学员"
  />
</template>

<script setup>
import Schedule from "./schedule.vue";
import MemberSelector from "./memberSelector.vue";
import {
  getRollCallDetailAPI,
  getMumberListByRollCallIdAPI,
  deleteOrderInRollCallAPI,
} from "@/api/registrar/class";
const props = defineProps({
  courseFilterIds: {
    type: String,
  },
  classId: {
    type: String,
  },
  classTitle: {
    type: String,
  },
  ifEdit: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  isVip: {
    type: String,
  },
});
const { proxy } = getCurrentInstance();
const emits = defineEmits(["refreshPage"]);
const loading = ref(false);
const scheduleRef = ref(null);
const memberList = ref([]);
const open = ref(false);
const mSelector = ref(null);

const data = reactive({
  form: {},
  currentItem: {},
});

const { form, currentItem } = toRefs(data);

function getDetail() {
  getRollCallDetailAPI({ id: currentItem.value.id }).then((response) => {
    form.value = response.data;
  });
}

// 查询每节课次里的学员信息
function getMumberListByLesson() {
  getMumberListByRollCallIdAPI({
    orderNo: currentItem.value.orderNo,
    pageSize: 9999,
    pageNum: 1,
  }).then((response) => {
    memberList.value = response.rows;
  });
}

function initPage() {
  getDetail();
  getMumberListByLesson();
}

// 调课
//function handleTransfer() {}

// 编辑课次
function handleEdit() {
  scheduleRef.value.getScheduleDetailInRollCall(form.value.id);
}
function handleDelete() {
  deleteOrderInRollCallAPI({
    orderNo: form.value.orderNo,
  }).then(() => {
    closeW();
  });
}

// 某课次添加临时学员
function handleAddTemp() {
  mSelector.value.openSelector();
}

function getRollCallDetail(item) {
  open.value = true;
  currentItem.value = item;
  initPage();
}

function closeW() {
  open.value = false;
  refreshParent();
}

function refreshParent() {
  emits("refreshPage");
}

defineExpose({ getRollCallDetail }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
